<template>
	<view class="intro-body">
		<view class="section-title">
			<text>商家介绍</text>
		</view>
		<view class="noData" v-if="!introData && !businessLicense">
			暂无商家介绍信息
		</view>
		<view class="intro-content">
			<view :class="['intro-text', { expanded: isExpanded }]" id="intro-text">{{
        introData.intro || ""
      }}</view>
			<view class="expand-btn" v-if="hasOverflow" @tap="toggleExpand">
				{{ isExpanded ? "收起" : "展开全部" }}
			</view>
		</view>
		<view class="intro-box">
			<view class="intro-box-item" v-if="introData && introData.tags && introData.tags.length > 0">
				<view class="tags-list">
					<view class="tags-item restaurant" v-for="(item, index) in introData.tags" :key="index">
						{{ item }}
					</view>
				</view>
			</view>
			<view class="intro-box-item" v-if="
          introData && introData.envImgList && introData.envImgList.length > 0
        ">
				<view class="item-title"> 餐厅环境 </view>
				<view :class="['img-list', { flex: introData.envImgCols != 1 }]">
					<view class="img-item" v-for="(item, index) in introData.envImgList" :key="index">
						<image class="img-item-url" :src="item"
							:mode="introData.envImgCols == 1 ? 'widthFix' : 'aspectFill'"></image>
					</view>
				</view>
			</view>
			<view class="intro-box-item" v-if="
          introData && introData.menuImgList && introData.menuImgList.length > 0
        ">
				<view class="item-title"> 餐厅菜单 </view>
				<!-- 	<view class="img-list flex">
					<view class="img-item menu" v-for="(item,index) in introData.menuImgList" :key="index">
						<image class="img-item-url" :src="item.image" mode="aspectFill"></image>
						<view class="img-item-info">
							<view class="img-item-info-name">
								{{item.name}}
							</view>
							<view class="img-item-info-desc">
								{{item.desc}}
							</view>
						</view>
					</view>
				</view> -->
				<view :class="['img-list', { flex: introData.menuImgCols != 1 }]">
					<view class="img-item" v-for="(item, index) in introData.menuImgList" :key="index">
						<image class="img-item-url" :src="item"
							:mode="introData.menuImgCols == 1 ? 'widthFix' : 'aspectFill'"></image>
					</view>
				</view>
			</view>
			<view class="intro-box-item" v-if="
          introData &&
          introData.featureImgList &&
          introData.featureImgList.length > 0
        ">
				<view class="item-title"> 招牌菜品 </view>
				<!-- 	<view class="img-list flex">
					<view class="img-item menu" v-for="(item,index) in introData.featureImgList" :key="index">
						<image class="img-item-url" :src="item.image" mode="aspectFill"></image>
						<view class="img-item-info">
							<view class="img-item-info-name">
								{{item.name}}
							</view>
							<view class="img-item-info-desc">
								{{item.desc}}
							</view>
						</view>
					</view>
				</view> -->
				<view :class="['img-list', { flex: introData.featureImgCols != 1 }]">
					<view class="img-item" v-for="(item, index) in introData.featureImgList" :key="index">
						<image class="img-item-url" :src="item"
							:mode="introData.featureImgCols == 1 ? 'widthFix' : 'aspectFill'"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="businessLicense" v-if="businessLicense" @click="goBusinessLicense">
			商家资质
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isExpanded: false,
				hasOverflow: false,
			};
		},
		props: ['introData', 'businessLicense'],
		onLoad() {},
		methods: {
			goBusinessLicense() {
				uni.navigateTo({
					url: "/mall_subpages/merchants/businessLicense?businessLicense=" + this.businessLicense
				})
			},
			toggleExpand() {
				this.isExpanded = !this.isExpanded;
			},
			checkOverflow() {
				// 使用uni-app的API获取元素高度
				const query = uni.createSelectorQuery().in(this);
				query
					.select("#intro-text")
					.boundingClientRect((data) => {
						if (data) {
							// 如果内容高度大于5行的高度（假设每行20px），则显示展开按钮
							this.hasOverflow = data.height > 100;
						}
					})
					.exec();
			},
		},
		mounted() {
			this.checkOverflow();
		},
		watch: {
			introData: {
				handler() {
					this.$nextTick(() => {
						this.checkOverflow();
					});
				},
				deep: true,
			},
		},
	};
</script>

<style lang="less">
	@import "./intro.less";

	.intro-content {
		.intro-text {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 5;
			overflow: hidden;
			text-overflow: ellipsis;
			line-height: 1.5;

			&.expanded {
				-webkit-line-clamp: unset;
			}
		}

		.expand-btn {
			color: #007aff;
			font-size: 28rpx;
			text-align: left;
			padding: 10rpx 0;
		}
	}
</style>